<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			.box {
				width: 100px;
				height: 100px;
				border-radius: 50%;
				background-color: red;
				position: absolute;
			}
		</style>
	</head>
	<body>
		<span>目标数量</span>
		<span id="count"></span>
		<script type="text/javascript">
			//这个计时器 负责 每隔一秒钟产生一个红色目标
			var timer1 = setInterval(() => {
				//获取视口的宽度和高度
				var maxWidth = window.innerWidth - 100;
				var maxheight = window.innerHeight - 100;
				// 创建div
				var box = document.createElement("div");
				box.className = "box";
				box.style.left = Math.random() * maxWidth + "px";
				box.style.top = Math.random() * maxheight + "px";
				box.onmouseenter = function() {
					box.remove();
				}
				document.body.appendChild(box);
			}, 10);
			//这个计时器 负责 获取网页中红色目标的数量
			var timer2 = setInterval(() => {
				var count = document.querySelectorAll("div").length;
				document.querySelector("#count").innerHTML = count;
				if (count >= 10) {
					alert("游戏结束");
					clearInterval(timer1);
					clearInterval(timer2);
				}
			})
		</script>
	</body>
</html>
